<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>树形网格</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.pure.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'pure';
    </script>
</head>
<body>
	<h2>树形网格</h2>
	<h3>说明:</h3>
    <span>树形网格（TreeGrid）从数据网格（DataGrid）继承，但是允许在行之间存在父/子节点关系。许多属性继承至数据网格（DataGrid），可以用在树形网格（TreeGrid）中。为了使用树形网格（TreeGrid），用户必须定义 'treeField' 属性，指明哪个字段作为树节点。</span>
	<h3>如：</h3>
	<h3>1.3.6树组件扩展的相关配置、事件、方法</h3>

	<div class="demo-exp-code entry-content"> 
		<table id="treegrid-dnd" title="Folder Browser" class="hisui-treegrid" style="width:1000px;height:550px"
				data-options="
					data: data,
					rownumbers: true,
					idField: 'id',
					treeField: 'name',
					onLoadSuccess: function(row){
						$(this).treegrid('enableDnd', row?row.id:null);
					},
					onDrop:onDropHandler
				">
			<thead>
				<tr>
					<th data-options="field:'name'" width="220">Name</th>
					<th data-options="field:'size'" width="150" align="right">Size</th>
					<th data-options="field:'date'" width="200">Modified Date</th>
				</tr>
			</thead>
		</table>
		<p>&nbsp;</p>
		<a href="#" id="toggleDnd" class="hisui-linkbutton" >禁止拖拽</a>
	</div>
	<script type="text/javascript">
		var data = [{
			"id":1,
			"name":"C",
			"size":"",
			"date":"02/19/2010",
			"children":[{
				"id":2,
				"name":"Program Files",
				"size":"120 MB",
				"date":"03/20/2010",
				"children":[{
					"id":21,
					"name":"Java",
					"size":"",
					"date":"01/13/2010",
					"state":"closed",
					"children":[{
						"id":211,
						"name":"java.exe",
						"size":"142 KB",
						"date":"01/13/2010"
					},{
						"id":212,
						"name":"jawt.dll",
						"size":"5 KB",
						"date":"01/13/2010"
					}]
				},{
					"id":22,
					"name":"MySQL",
					"size":"",
					"date":"01/13/2010",
					"state":"closed",
					"children":[{
						"id":221,
						"name":"my.ini",
						"size":"10 KB",
						"date":"02/26/2009"
					},{
						"id":222,
						"name":"my-huge.ini",
						"size":"5 KB",
						"date":"02/26/2009"
					},{
						"id":223,
						"name":"my-large.ini",
						"size":"5 KB",
						"date":"02/26/2009"
					}]
				}]
			},{
				"id":3,
				"name":"eclipse",
				"size":"",
				"date":"01/20/2010",
				"children":[{
					"id":31,
					"name":"eclipse.exe",
					"size":"56 KB",
					"date":"05/19/2009"
				},{
					"id":32,
					"name":"eclipse.ini",
					"size":"1 KB",
					"date":"04/20/2010"
				},{
					"id":33,
					"name":"notice.html",
					"size":"7 KB",
					"date":"03/17/2005"
				}]
			}]
		}]
		function onDropHandler(t,s,p){

			if(p=='append'){
				$(this).treegrid('enableDnd', t?t.id:null);
			}else{
				var par=$('#treegrid-dnd').treegrid('getParent',t.id)
				if (par && par.id) {
					$(this).treegrid('enableDnd', par?par.id:null);
				}
							
			}
		}
		$(function(){
			$('#toggleDnd').click(function(){
				if ( $(this).text()=="禁止拖拽" ){
					$('#treegrid-dnd').treegrid("disableDnd");
					$(this).find('.l-btn-text').text("开启拖拽");
				}else{
					$('#treegrid-dnd').treegrid("enableDnd");
					$(this).find('.l-btn-text').text("禁止拖拽");
				}
			})
		})
				
	
	</script>
	<prettyprint/>	
</body>

</html>